<template>
  <home-top :user="data.user" @logout="logout"></home-top>
  <home-content></home-content>
  <home-bottom></home-bottom>
  <MyAlert :msg="data.msg"></MyAlert>
</template>


<script>
import HomeTop from "@/components/HomeTop.vue";
import HomeContent from "@/components/HomeContent.vue";
import HomeBottom from "@/components/HomeBottom.vue";
import emitter from '@/utils/event-bus.js'
import axios from "axios";
import MyAlert from "@/components/MyAlert.vue";
import {onMounted, reactive, watch} from "vue";

export default {
  name: 'App',
  components: {
    MyAlert,
    HomeTop, HomeContent, HomeBottom
  },
  setup() {
    axios.defaults.baseURL = "http://localhost:8080";

    // 变量
    let data = reactive({
      user: {},
      msg: ''
    })

    // 初始化
    onMounted(() => {
      emitter.on('alert', setMsg)
      emitter.on('login', setUser)
      axios.get("/api/user").then(resp => {
        if (resp.data !== '') {
          data.user = resp.data
        } else {
          data.user = null
        }
      }).catch(err => console.log(err));
    })

    // 监听
    watch(() => data.msg, () => {
      setTimeout(() => {
        data.msg = ''
      }, 1000)
    })

    // 方法
    const logout = () => {
      axios.get("/api/user/logout")
      data.user = null
    }

    const setMsg = (value) => {
      data.msg = value
    }

    const setUser = (value) => {
      data.user = value
    }

    return {
      data,
      logout,
      setMsg,
      setUser
    }
  }
}
</script>

<style>
/* 公共 */
body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}


body,
html {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

a {
  color: black;
}

a:hover {
  color: deepskyblue;
}

@font-face {
  font-family: 字心坊猫的天空之城;
  src: url('@/assets/font/字心坊猫的天空之城.TTF');
}

@font-face {
  font-family: 字魂93号-萌趣小丸子;
  src: url('@/assets/font/字魂93号-萌趣小丸子.ttf');
}

@font-face {
  font-family: 伯乐夏日微风体;
  src: url('@/assets/font/伯乐夏日微风体.TTF');
}

#app {
  height: 100%;
  width: 100%;
}

</style>
